.move {
    position: relative;
    border: 1px solid #03A9F3;
    height: 50px;
	width: 200px;
}

.move::before,
.move::after {
	content: "";
	position: absolute;
	width: 20px;
	height: 20px;
}

.move::before {
	top: -5px;
	left: -5px;
	border-top: 1px solid #03A9F3;
	border-left: 1px solid #03A9F3;
}

.move::after {
	right: -5px;
	bottom: -5px;
	border-bottom: 1px solid #03A9F3;
	border-right: 1px solid #03A9F3;
}

.move:hover::before,
.move:hover::after {
	width: calc(100% + 9px);
	height: calc(100% + 9px);
}


.mouse{
    border: 1px solid #333;
    height: 50px;
	width: 200px;
	outline: 1px solid #333;
	outline-offset: -1px;
}
.mouse:hover {
	border: none;
	background: 
		linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
		linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
		linear-gradient(0deg, #333 50%, transparent 0) repeat-y,
		linear-gradient(0deg, #333 50%, transparent 0) repeat-y;
	background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px;
	background-position: 0 0, 0 100%, 0 0, 100% 0;
	animation: linearGradientMove .3s infinite linear;
}

@keyframes linearGradientMove {
    100% {
        background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;
    }
}



/* *, *::before, *::after {
	box-sizing: border-box;
} */

.rainbow {
	position: relative;
	z-index: 0;
	width: 400px;
	height: 300px;
	border-radius: 10px;
	overflow: hidden;
	padding: 2rem;
	
}
.rainbow::before {
	content: '';
	position: absolute;
	z-index: -2;
	left: -50%;
	top: -50%;
	width: 200%;
	height: 200%;
	background-color: #399953;
	background-repeat: no-repeat;
	background-size: 50% 50%, 50% 50%;
	background-position: 0 0, 100% 0, 100% 100%, 0 100%;
	background-image: linear-gradient(#399953, #399953), linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33), linear-gradient(#377af5, #377af5);
	animation: rotate 4s linear infinite;
}

.rainbow::after {
	content: '';
	position: absolute;
	z-index: -1;
	left: 6px;
	top: 6px;
	width: calc(100% - 12px);
	height: calc(100% - 12px);
	background: white;
	border-radius: 5px;
	animation: opacityChange 3s infinite alternate;
}
@keyframes rotate {
	100% {
		transform: rotate(1turn);
	}
}
@keyframes opacityChange {
	50% {
		opacity:1;
	}
	100% {
		opacity: .5;
	}
}


.clipPath {
	height: 50px;
	width: 200px;
	text-align: center;
	line-height: 50px;
    position: relative;
}
.clipPath::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border: 2px solid gold;
	animation: clippath 3s infinite linear;
}

@keyframes clippath {
    0%,
    100% {
        clip-path: inset(0 0 95% 0);
    }
    25% {
        clip-path: inset(0 95% 0 0);
    }
    50% {
        clip-path: inset(95% 0 0 0);
    }
    75% {
        clip-path: inset(0 0 0 95%);
    }
}



.over {
    position: relative;
    margin: auto;
    width: 200px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    overflow: hidden;
}
.over::after {
	content: "";
	position: absolute;
	top: 4px;
	bottom: 4px;
	right: 4px;
	left: 4px;
	line-height: 92px;
	font-size: 24px;
	background: #fff;
	border: 2px solid yellowgreen;
	cursor: pointer;
	color: yellowgreen;
}

.over::before {
	content: "";
	position: absolute;
	top: 0px;
	bottom: 0px;
	right: -20px;
	left: 0px;
	background: #fff;
	transform: rotateZ(-90deg) translate(-100%, -100%);
	transform-origin: top left;
	transition: transform .3s;
	transition-timing-function: linear;
}

.over:hover {
	filter: contrast(1.2);
}

.over:hover::before {
	transform: rotateZ(0deg) translate(0%, -0%);
}

.over:nth-child(2) {
    overflow: unset;
}
.over::after {
	content: "";
}

.over:nth-child(1):hover ~ .over:nth-child(2)::before {
    transform: rotateZ(0deg) translate(0%, -0%);
}




.skulls {
  position: relative;
  width: 600px;
  height: 200px;
  margin: 0 auto;
  border: 24px solid;
  border-image: url(https://skullctf.com/images/skull-border.svg);
  border-image-slice: 32;
  border-image-repeat: round;
}
